<template>
  <div class="yemian">
    <div class="dingbu">
      <div class="biaoti">
        <img src="../assets/image/纸飞机.png" class="tubiao">
        <span class="wz">NBM在线考试系统</span>
      </div>
      <NavBar />
      <div class="touxiang">
        <img src="../assets/image/头型.png" style="height: 50px; width: 50px;">
        <UserInfo />
      </div>
    </div>

    <!-- 优化后的轮播图 -->
    <div class="LBT">
      <el-carousel 
        :interval="3000" 
        height="170px" 
        trigger="click" 
        arrow="never"
        indicator-position="outside"
        :autoplay="true">
        <el-carousel-item v-for="(image, index) in images" :key="index">
          <img :src="image" class="carousel-image" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="zw" style="display: flex;">
      <div class="HY">
        <span>欢迎使用NBM在线考试系统！</span>
      </div>

      <div class="announcement-container">
        <div class="announcement-header">
          <h1>公告</h1>
          <el-button 
            type="primary" 
            @click="publishAnnouncement"
            v-if="userType === 1"> <!-- 仅教师可见 -->
            发布公告
          </el-button>
        </div>
        
        <div class="announcement-list">
          <div 
            v-for="(item, index) in currentPageData" 
            :key="index" 
            class="announcement-item"
            @click="viewDetail(item.id)">
            <div class="announcement-content">
              <h2>{{ item.title }}</h2>
              <p class="date">{{ formatDate(item.date) }}</p>
              <p class="content">{{ truncateContent(item.content, 50) }}</p>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            small
            layout="prev, pager, next"
            :total="announcements.length"
            :page-size="itemsPerPage"
            v-model:current-page="currentPage"
            @current-change="handlePageChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import NavBar from '../components/NavBar.vue';
import UserInfo from '../components/UserInfo.vue';

const router = useRouter();
const userType = ref(0); // 0-学生，1-教师

// 轮播图图片
const images = ref([
  new URL('../assets/image/lb1.jpg', import.meta.url).href,
  new URL('../assets/image/4.png', import.meta.url).href,
  new URL('../assets/image/lb1.jpg', import.meta.url).href,
]);

// 公告数据
const announcements = ref([
  { id: 1, title: '系统维护通知', date: '2025-01-15', content: '系统将于1月20日凌晨2:00-4:00进行维护升级，届时将无法访问...' },
  { id: 2, title: '期末考试安排', date: '2025-01-10', content: '本学期期末考试将于1月25日开始，请各位同学提前做好准备...' },
  { id: 3, title: '新功能上线', date: '2025-01-05', content: '在线考试系统新增自动批改功能，教师可以更高效地批改试卷...' },
  { id: 4, title: '使用指南', date: '2025-01-01', content: '新增系统使用手册，请各位师生下载查阅...' },
]);

// 分页逻辑
const itemsPerPage = 3;
const currentPage = ref(1);

const totalPages = computed(() => Math.ceil(announcements.value.length / itemsPerPage));

const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  return announcements.value.slice(start, end);
});

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
};

// 截断内容
const truncateContent = (content, length) => {
  return content.length > length ? content.substring(0, length) + '...' : content;
};

// 查看详情
const viewDetail = (id) => {
  router.push(`/announcement/${id}`);
};

// 发布公告
const publishAnnouncement = () => {
  router.push('/publish');
};

// 初始化用户类型
onMounted(() => {
  // 从localStorage或vuex获取用户类型
  userType.value = localStorage.getItem('userType') || 0;
});
</script>

<style scoped>
.yemian {
  width: 100%;
  min-height: 100vh;
  padding: 0 20px;
  box-sizing: border-box;
}

.dingbu {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e0e0e0;

  box-sizing: border-box;
}

.biaoti {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tubiao {
  height: 40px;
  width: 40px;
}

.wz {
  color: #333;
  font-size: 24px;
  font-weight: bold;
}

.touxiang {
  display: flex;
  align-items: center;
  gap: 10px;
}

.LBT {
  width: 100%;
  height: 170px;
  margin: 20px 0;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zw {
  display: flex;
  gap: 40px;
  padding: 0 20px;
}

.HY {
  flex: 1;
  font-size: 36px;
  font-weight: bold;
  color: #333;
  padding-top: 20px;
}

.announcement-container {
  flex: 1;
  max-width: 700px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.announcement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.announcement-header h1 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.announcement-list {
  margin-top: 20px;
}

.announcement-item {
  border-bottom: 1px solid #eee;
  padding: 15px 0;
  cursor: pointer;
  transition: all 0.3s;
}

.announcement-item:hover {
  background-color: #f5f7fa;
}

.announcement-content h2 {
  margin: 0 0 5px 0;
  font-size: 18px;
  color: #333;
}

.announcement-content .date {
  color: #999;
  font-size: 14px;
  margin-bottom: 8px;
}

.announcement-content .content {
  color: #666;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .zw {
    flex-direction: column;
  }
  
  .HY {
    font-size: 28px;
    text-align: center;
    padding-top: 10px;
  }
  
  .announcement-container {
    max-width: 100%;
  }
}
</style>